<template>
	<div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				购货单位
			</div>
			<div class="main-color v-flex v-col-center mt-[20px]">
				<span class="w-[100px] text-right">单位信息：</span>
				<el-radio-group v-model="radio" class="ml-4">
					<el-radio label="1" size="large">翼凯机械</el-radio>
					<el-radio label="2" size="large">启怡国际</el-radio>
				</el-radio-group>
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">订单编号：</span>
						<el-input disabled class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]" v-if="radio==1">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">名称：</span>
						<el-input  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]" v-if="radio==1">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">纳税人识别号：</span>
						<el-input  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">名地址、电话：</span>
						<el-input  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]" v-if="radio==1">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">开户行及账号：</span>
						<el-input  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">说明：</span>
						<el-input  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<div class="mt-[20px] v-flex v-col-top main-color w-[300px]" v-if="radio==2">
				<span class="w-[100px] text-right">上传文件：</span>
				<el-upload v-model:file-list="fileList" class="flex-1"
					action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange" :limit="1">
					<el-button>上传文件</el-button>
					<template #tip>
						<div class="el-upload__tip main-color1">
							支持扩展名：pdf
						</div>
					</template>
				</el-upload>
			</div>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >取消</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">提交</el-button>
		</el-row>
	</div>
</template>
<script lang="ts" setup>
	import type { UploadProps , UploadUserFile} from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	const imageUrl = ref('')//图片上传
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
	
		return true
	}
	const fileList = ref<UploadUserFile[]>([
	  {
	    name: 'food.jpeg',
	    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
	  }
	])
	const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
	  fileList.value = fileList.value.slice(-3)
	}
	const radio = ref('1')
</script>

<style>
</style>